<template>
	<view class="main-page">
		<!-- 头部导航 -->
		<view class="main-page-navbar">
			<u-navbar :title="navbarTitle" border>
				<view slot="left"></view>
			</u-navbar>
		</view>
		
		<view class="main-member-page">
			<!-- 首页 -->
			<view v-show="tabberValue === 0">
				<MainIndex ref="mainIndexPage"/>
			</view>
			
			<!-- 消息 -->
			<view v-show="tabberValue === 1">
				<MainInfo ref="mainInfoPage"/>
			</view>
			
			<!-- 通讯录 -->
			<view v-if="tabberValue === 2">
				<MainBook ref="mainBookPage"/>
			</view>
			
			<!-- 我的 -->
			<view v-show="tabberValue === 3">
				<MainMine ref="mainMinePage"/>
			</view>
		</view>
	
		<!-- 底部工具栏 -->
		<u-tabbar
		:value="tabberValue"
		:fixed="true"
		:placeholder="true"
		:safeAreaInsetBottom="true"
		active-color="#1989fa"
		inactive-color="#7d7e80"
		>
			<u-tabbar-item 
			v-for="(item, index) in tabbarItems" 
			:key="index" 
			:text="item.text" 
			:icon="tabberValue === index? item.activeIcon : item.inactiveIcon" 
			@click="selectTabbar"/>
		</u-tabbar>
	</view>
</template>

<script>
	import MainIndex from './components/index.vue'
	import MainMine from './components/mine.vue'
	import MainInfo from './components/info.vue'
	import MainBook from './components/book.vue'
	
	export default {
		components: {
			MainIndex,
			MainMine,
			MainInfo,
			MainBook
		},
		data() {
			return {
				tabberValue: 0,
				navbarTitle: '首页',
				tabbarItems: [{
					text: '首页',
					activeIcon:'/static/svg/home-active.svg',
					inactiveIcon: '/static/svg/home.svg'
				}, {
					text: '消息',
					activeIcon:'/static/svg/chat-active.svg',					
					inactiveIcon: '/static/svg/chat.svg',
				}, {
					text: '通讯录',
					activeIcon: '/static/svg/friends-list-active.svg',
					inactiveIcon: '/static/svg/friends-list.svg'
				}, {
					text: '我的',
					activeIcon:'/static/svg/account-active.svg',
					inactiveIcon: '/static/svg/account.svg'
				}]
			}
		},
		methods: {
			selectTabbar(e){
				this.tabberValue = e
				this.navbarTitle = this.tabbarItems[e].text
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-page {
		width: 100%;
		height: 100%;
		overflow: hidden;
		
		.main-page-navbar {
			background-color: #CDCDCD;
			height: 80px;
		}
		
		.main-member-page {
			width: 100%;
			padding: 0px;
			margin: 0px;
			 height: (100vh -80px);
		}
	}
</style>
